<template>
  <div class="main-container-app">
    <el-row class="form-contain">
      <payment-form @handleQueryPayment="handleQueryPerFee"></payment-form>
    </el-row>
    <div class="table-contain">
    <person-fee-table :searchList="perFeeRes" :listLoadingPayment="loading"
                      @handleSizeChangePerFee="handleSizeChangePerFee"
                      @handleCurrentChangePerFee="handleCurrentChangePerFee"></person-fee-table>
    </div>
  </div>
</template>

<script>
  /* eslint-disable */
  import PaymentForm from '../operatingManagement/paymentChild/paymentForm'
  import PersonFeeTable from './personFeeChild/personFeeTable';
  import {fetchListPerFee} from '@/api/assessment/perFee'

  export default {
    components: {PersonFeeTable, PaymentForm},
    data() {
      return {
        perFeeRes: null,
        loading: false,
        queryDataPerFee: '',
        listQuery: {
          page: 1,
          limit: 20
        }
      }
    },
    methods: {
      handleQueryPerFee(val) {
        this.queryDataPerFee = val
        this.listQuery.page=1
        this.listQuery.limit=20
        this.getDataListPerFee()
      },
       handleCurrentChangePerFee(val) {
        this.listQuery.page = val
        this.getDataListPerFee()
      },
      handleSizeChangePerFee(val) {
        this.listQuery.limit = val
        this.listQuery.page = 1
        this.getDataListPerFee()
      },
      getDataListPerFee() {
        this.loading = true
        fetchListPerFee(this.listQuery, this.queryDataPerFee).then(res => {
          this.perFeeRes = res
          this.loading = false
        })
      }
    }

  }
</script>

<style scoped>
</style>
